<template>
  <van-list :offset="20" :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <div class="prolist">
      <ul class="left-box">
        <li class="goods-box" v-for="item in oddList" :key="item.proid">
          <van-image fit="contain" radius="10" :src="item.img1" />
          <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
          <p class="pprice">¥：{{ item.originprice }}</p>
        </li>
      </ul>
      <ul class="right-box">
        <li class="goods-box" v-for="item in evenList" :key="item.proid">
          <van-image fit="contain" radius="10" :src="item.img1" />
          <p class="van-multi-ellipsis--l2 pname">{{ item.proname }}</p>
          <p class="pprice">¥：{{ item.originprice }}</p>
        </li>
      </ul>
    </div>
    <Top :size="30"/>
  </van-list>
</template>

<script>
import Top from './Top.vue'
export default {
  data() {
    return {
      loading: true,
      finished: false,
      goodsList: [],
      count: 0,
      limitNum: 10,
      show: false
    }
  },
  computed: {
    oddList: function () {
      return this.goodsList.filter((item, index) => index % 2 == 0)
    },
    evenList: function () {
      return this.goodsList.filter((item, index) => index % 2 == 1)
    }
  },
  created() {
    this.getImgs();
  },
  methods: {
    getImgs() {
      this.count++;
      this.loading = true;
      this.$http("/pro/list", {
        params: { count: this.count, limitNum: this.limitNum }
      })
        .then(res => {
          if (res.data.code === "200") {
            this.loading = false;
            if (res.data.data.length == 0) {
              this.finished = true;
              return;
            }
            this.goodsList.push(...res.data.data);
          }
        })
    },
    onLoad() {
      console.log("onLoad");
      this.getImgs();
    }
  }
}
</script>

<style scoped>
.prolist {
  width: 100%;
  display: flex;
}

.left-box,
.right-box {
  width: 45%;
  margin-left: 3%;
}

.left-box .img,
.right-box .img {
  width: 100%;
  min-height: 100px;
}

.right-box {
  width: 45%;
}

.goods-box {
  margin-top: 10px;
  border: 1px solid #bdbbbb;
  border-radius: 10px;
}

.goods-box .pname {
  font-size: 14px;
}

.goods-box .pprice {
  text-align: center;
  color: red;
  font-weight: bold;
}

.top-box {
  position: fixed;
  right: 10px;
  bottom: 60px;
  background-color: white;
  border-radius: 50%;
}
</style>